<template>
  <div id="Customerintent" ref="chart" style="width: 100%; height: 400px;"></div>
  
</template>
  
<script setup lang="ts">
import { ref, watch, onMounted, defineProps } from 'vue';
import * as echarts from 'echarts';

interface IProps {
  data: Array<any>;
}

const props = defineProps<IProps>();

const chartRef = ref(null);

// 监听 data 变化，更新图表
watch(() => props.data, (newData) => {
  // console.log(newData);
  if (newData) {
    const result = newData.map(item => ({  value: item.B, name: item.A }))
    const filteredResult = result.filter(item => item.value !== undefined &&  item.name !== undefined )
    renderChart(filteredResult);
  }
});

const btn = () => {
  console.log(props.data);
};
//   const chartContainer = document.getElementById('dayEcharts');
//  const chart = echarts.init(chartContainer);
// 渲染图表
const renderChart = (data: any) => {
  const chartContainer = document.getElementById('Customerintent');
  const chart = echarts.init(chartContainer);
  // console.log(data);
  // 在这里根据传入的数据配置图表
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  chart.setOption(option);
};

onMounted(() => {
  if (props.data) {
    const result = props.data.map(item => ({  value: item.B, name: item.A }))
    const filteredResult = result.filter(item => item.value !== undefined &&  item.name !== undefined )
    renderChart(filteredResult);
  }
});
</script>